<template>
  <div class="page-common-layout">
    <div class="page-common-left" style="width:15%;padding: 0">
      <TableClassify :title="classifyTitle"
                     :treeData="classifyData"
                     @select="onSelect"
                     :replaceFields="{title:'categoryName', key:'categoryCode' }"
                     :loading="masterConfirmLoading"
                     :searchFieldName="searchFieldName"
                     searchPlaceholder="名称"
      ></TableClassify>
    </div>
    <div class="page-common-content flex" style="flex-direction:column;">
      <tool-bar
          @search="getFlowData()"
          @reset="
          () => {
            (this.subQueryParam.name = ''),
              getFlowData(),
              (processModelType = 2);
          }
        "
      >
        <template slot="toolForm">
          <a-form-item :label="$ct('workflowName','流程名称')">
            <a-input v-model="subQueryParam.name" :placeholder="$ct('workflowName','流程名称')"/>
          </a-form-item>
        </template>
      </tool-bar>
      <div style="padding: 20px;flex: 1;overflow: auto;">
        <a-row :gutter="16" v-if="!isEmpty">
          <a-col :span="6" v-for="(item, index) in flowData" :key="index" class="margin-bottom-xs">
            <div class="content-box" @click="handleStart(item)">
              <div class="icon-box" v-html="iconList[Math.round(Math.random()*5)]"
                   :style="{'backgroundColor': iconColor[Math.round(Math.random()*5)]}">

              </div>
              <div class="text-box">{{item.name}}</div>
            </div>
          </a-col>
        </a-row>
        <a-empty v-else class="margin-right-xl"/>
      </div>
      <a-pagination
          style="text-align: right;margin-top: 10px;"
          show-size-changer
          size="small"
          :current="pageNo"
          :total="totalCount"
          :page-size.sync="pageSize"
          @change="pageChange"
          @showSizeChange="onShowSizeChange"
      />
      <sub-form
          ref="subModal"
          :visible="subVisible"
          :loading="subConfirmLoading"
          :model="subMdl"
          @cancel="handleCancel('sub')"
          @ok="handleOk()"
      />
    </div>
  </div>
</template>

<script>
  import {masterTableMixin} from "@/mixins/masterTableMixin";
  import {DataGrid,TableClassify} from "@/components";
  import subForm from "./edit.vue";

  export default {
    name: "apiFlowableProcessDefinition",
    mixins: [masterTableMixin],
    components: {
      subForm,
      DataGrid,
      TableClassify
    },
    data() {
      return {
        masterColumns: [
          {
            title: "流程分类",
            align: "center",
            dataIndex: "categoryName",
          },
        ],
        subColumns: [
          {
            title: "流程名称",
            align: "center",
            dataIndex: "name",
          },
          {
            title: "流程标识",
            align: "center",
            dataIndex: "modelKey",
          },
          {
            title: "版本",
            align: "center",
            dataIndex: "version",
            scopedSlots: {customRender: "version"},
            width: 80,
          },
          {
            title: "操作",
            dataIndex: "action",
            width: 150,
            scopedSlots: {customRender: "action"},
            align: "center",
          },
        ],
        // create model
        masterVisible: false,
        subVisible: false,
        masterConfirmLoading: false,
        subConfirmLoading: false,
        masterMdl: null,
        subMdl: null,
        // 查询参数
        masterQueryParam: {},
        subQueryParam: {
          // processModelType: 2,
        },
        url: {
          masterList: "/workflow/flowCategory/getAllData",
          subList: "/workflow/apiFlowableProcessDefinition/getPageSet",
          startProcessInstanceByKey:
            "/workflow/apiFlowableProcessInstance/startProcessInstanceByKey",
        },
        iconList: [
          '<svg t="1653627916559" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1525" width="20" height="20"><path d="M512 42.666667c259.2 0 469.333333 210.133333 469.333333 469.333333s-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667z m0 96a32 32 0 0 0-32 32v341.333333c0 17.664 14.336 32 32 32h256l4.352-0.298667A32 32 0 0 0 768 480h-224V170.666667l-0.298667-4.352A32 32 0 0 0 512 138.666667z" p-id="1526" fill="#ffffff"></path></svg>',
          '<svg t="1653628130818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4751" width="20" height="20"><path d="M977.3248 287.872L623.5328 457.6l-138.944 244.064a28.576 28.576 0 0 1-12.8 12.48l-69.888 34.368a28.768 28.768 0 0 1-12.8 0 28.352 28.352 0 0 1-18.752-7.04 31.68 31.68 0 0 1-9.376-32.736l43.488-149.44-85.248 42.464H312.3648c-59.296 22.4-125.76 7.232-170.496-38.912L9.7408 435.52a31.616 31.616 0 0 1-9.376-27.424 29.952 29.952 0 0 1 17.056-22.976l60.544-29.184c7.36-3.2 15.648-3.2 23.008 0l132.96 65.44 192.736-110.56-174.656-88.416a31.968 31.968 0 0 1-17.056-28.288 31.072 31.072 0 0 1 17.056-28.32l78.304-38.016a29.632 29.632 0 0 1 19.616 0l293.248 76.928 160.256-76.928a156 156 0 0 1 147.584 0c36.16 3.36 65.632 31.488 71.84 68.608 6.208 37.12-12.416 73.92-45.408 89.664l-0.128 1.792z m-61.056 642.656H105.5488a42.656 42.656 0 0 1 0-85.28h810.72a42.656 42.656 0 0 1 0 85.28z" p-id="4752" fill="#ffffff"></path></svg>',
          '<svg t="1653628227397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8660" width="20" height="20"><path d="M604.8 352h-185.6C211.2 352 160 761.6 160 761.6c0 54.4 41.6 105.6 96 105.6h515.2c54.4 0 96-54.4 96-105.6-3.2 0-54.4-409.6-262.4-409.6z m22.4 92.8c9.6 3.2 12.8 19.2 9.6 32l-70.4 115.2h60.8c12.8 0 22.4 9.6 22.4 22.4s-9.6 22.4-22.4 22.4h-92.8v28.8h92.8c12.8 0 22.4 9.6 22.4 22.4 0 12.8-9.6 22.4-22.4 22.4h-92.8v60.8c0 12.8-9.6 22.4-22.4 22.4-12.8 0-22.4-9.6-22.4-22.4v-60.8h-92.8c-12.8 0-22.4-9.6-22.4-22.4 0-12.8 9.6-22.4 22.4-22.4h92.8v-28.8h-92.8c-12.8 0-22.4-9.6-22.4-22.4s9.6-22.4 22.4-22.4h64l-64-115.2c-9.6-9.6-3.2-22.4 9.6-28.8 9.6-9.6 22.4-3.2 28.8 3.2l80 137.6h3.2l80-137.6c3.2-6.4 16-12.8 28.8-6.4zM323.2 192l3.2 9.6c9.6 28.8 48 112 92.8 112h179.2c54.4 0 96-121.6 96-121.6v-6.4c0-32-9.6-57.6-64-57.6-64 0-80 41.6-124.8 41.6-41.6 0-64-32-121.6-41.6-51.2-3.2-60.8 32-60.8 64z" p-id="8661" fill="#ffffff"></path></svg>',
          '<svg t="1653635756979" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10624" width="20" height="20"><path d="M624.170667 541.184c-41.194667 40.277333-68.864 70.570667-82.986667 90.88-36.821333 52.970667-44.629333 106.432-44.629333 150.506667 0 55.466667 14.72 107.456 40.469333 152.234666H76.693333c-18.773333 0-34.026667-16.298667-34.026666-36.394666v-45.610667c0-3.413333 0.533333-6.912 1.664-10.538667 10.112-30.805333 31.146667-58.090667 62.506666-81.173333 24.362667-17.962667 55.232-33.536 91.712-46.357333 56.661333-19.904 115.370667-27.882667 135.125334-30.250667 1.066667-0.128-0.917333-51.434667-0.277334-52.416 0.128-0.213333 0-18.922667-10.965333-31.274667a3.370667 3.370667 0 0 0-0.810667-0.896c-32.469333-27.456-60.117333-66.56-80.277333-113.493333a4.032 4.032 0 0 0-3.072-2.496c-28.245333-4.138667-54.336-34.752-63.594667-75.818667-10.154667-45.013333 1.344-87.338667 27.434667-104.277333a4.373333 4.373333 0 0 0 1.898667-3.733333c-1.365333-86.058667 19.2-154.346667 61.226666-202.986667C319.253333 34.474667 393.429333 21.333333 446.101333 21.333333c52.693333 0 126.848 13.141333 180.906667 75.754667 42.026667 48.64 62.592 116.906667 61.226667 202.986667a4.394667 4.394667 0 0 0 1.898666 3.733333c26.069333 16.938667 37.568 59.242667 27.434667 104.277333-9.28 41.066667-35.370667 71.68-63.616 75.818667a4.032 4.032 0 0 0-3.093333 2.474667c-6.656 15.616-14.4 30.72-23.168 45.226666l-3.541334 9.578667zM768 981.333333c-117.824 0-213.333333-95.509333-213.333333-213.333333s95.509333-213.333333 213.333333-213.333333 213.333333 95.509333 213.333333 213.333333-95.509333 213.333333-213.333333 213.333333z m-0.042667-185.92l73.514667 73.557334a19.477333 19.477333 0 0 0 27.52-27.52l-73.514667-73.557334 73.28-73.344a19.456 19.456 0 0 0-27.52-27.52L768 740.373333l-73.216-73.28a19.456 19.456 0 0 0-27.52 27.52l73.216 73.28-73.408 73.450667a19.456 19.456 0 1 0 27.498667 27.52l73.386666-73.450667z" fill="#ffffff" p-id="10625"></path></svg>',
          '<svg t="1653637353740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15195" width="20" height="20"><path d="M605.09 599.924h3.887a65.932 65.932 0 0 1 65.932 65.909H372.364a65.932 65.932 0 0 1 65.931-65.932h3.887V495.64c-14.546-7.54-23.273-17.152-23.273-27.624 0-1.955 0.303-3.887 0.908-5.795-56.413-32.885-93.999-91.811-93.999-159.023 0-103.191 88.576-186.833 197.818-186.833s197.819 83.642 197.819 186.833c0 67.212-37.586 126.138-93.999 159.046a19.27 19.27 0 0 1 0.908 5.818c0 10.45-8.728 20.061-23.273 27.602v104.261zM232.728 709.818h558.546a93.09 93.09 0 0 1 93.09 93.091v58.182a46.545 46.545 0 0 1-46.545 46.545H186.182a46.545 46.545 0 0 1-46.546-46.545v-58.182a93.09 93.09 0 0 1 93.091-93.09z" fill="#ffffff" p-id="15196"></path></svg>',
          '<svg t="1653637420575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16090" width="20" height="20"><path d="M518.217143 432.64V73.142857A73.142857 73.142857 0 0 1 603.428571 1.097143 512 512 0 0 1 1022.902857 420.571429 73.142857 73.142857 0 0 1 950.857143 505.782857H591.36a73.142857 73.142857 0 0 1-73.142857-73.142857z" p-id="16091" fill="#ffffff"></path><path d="M493.714286 566.857143h340.297143a73.142857 73.142857 0 0 1 73.142857 85.577143A457.142857 457.142857 0 1 1 371.565714 117.76a73.142857 73.142857 0 0 1 85.577143 73.142857V530.285714a36.571429 36.571429 0 0 0 36.571429 36.571429z" p-id="16092" fill="#ffffff"></path></svg>'
        ],
        iconColor: ['#5094F4', '#E0614C', '#5ABC8F', '#E1BF6C', '#FF9200', '#722ED1'],
        flowData: [],
        pageNo: 1,
        totalCount: 1,
        pageSize: 10,
        pageInfo: {
          pageNo: 1,
          pageSize: 20
        },
        isEmpty: true,
        classifyData: [],
        classifyTitle:'流程分类',
        searchFieldName:"categoryName"
      };
    },
    mounted() {
      this.getFlowData()
      this.getClassifyData()
    },
    methods: {
      //分类行点击
      onSelect(e){
        this.getFlowData(e[0])
      },
      //获取分类数据
      getClassifyData() {
        this.masterConfirmLoading = true
        this.$post(this.url.masterList, {}).then(res => {
          if (res) {
            this.classifyData = res
            this.masterConfirmLoading = false
          }
        })
      },
      // 发起流程
      handleStart(e) {
        this.spinning = true;
        const form = this.$refs.subModal.form;
        form.resetFields(); // 清理表单数据（可不做）
        this.$post("/workflow/flowModel/getDetailByModelKey", {
          modelKey: e.modelKey,
          procdefId: e.procdefId,
        }).then((res) => {
          if (res.statusCode == 300) {
            this.$message.info(res.message);
          } else {
            this.subVisible = true;
            res.title = e.name + '-' + res.title
            this.$refs.subModal.loadDataJson(e.modelKey, e.procdefId, 1, res);
          }
        }).finally(() => {
          this.spinning = false;
        });
      },
      handleOk() {
        this.subVisible = false;
      },
      pageChange(page, pageSize) {
        this.pageInfo = {
          pageNo: page,
          pageSize: pageSize
        }
        this.getFlowData()
      },
      onShowSizeChange(current, size) {
        this.pageInfo = {
          pageNo: current,
          pageSize: size
        }
        this.getFlowData()
      },
      getFlowData(e) {
        if (e) {
          this.subQueryParam.category = e
        }
        const parameters = Object.assign({},
          this.subQueryParam,
          this.pageInfo
        );
        this.$post(this.url.subList, parameters).then(res => {
          if (res.rows.length > 0) {
            this.isEmpty = false
          } else {
            this.isEmpty = true
          }
          this.flowData = res.rows;
          this.pageNo = res.pageNo;
          this.totalCount = res.totalCount;
          this.pageSize = res.pageSize;


        })
      }
    },
  };
</script>

<style lang="less" scoped>
  /deep/ .content-box {
    display: flex;
    align-items: center;
    border: 1px solid #EDEFF4;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
  }

  /deep/ .content-box:hover {
    transform: scale(1.02);
    opacity: 0.8;
  }

  /deep/ .icon-box {
    text-align: center;
    height: 40px;
    width: 40px;
    padding: 10px;
    border-radius: 4px;
  }

  /deep/ .text-box {
    // font-size: 16px;
    // font-weight: bold;
    margin-left: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-common-layout .page-common-left + .page-common-content{
    max-width:unset !important;
  }

</style>
